<template>
  <div class='settleinfo'>
    <div class="header-box">
      <van-icon name="arrow-left" size="24" @click="onclickleft" />
      <div class="header-item">编辑员工结算信息</div>
      <van-button size="small" class="header-save" @click="onClickRight" :disabled="auditstatus === '审核中'">编辑</van-button>
    </div>            
    <div class="content-box">
      <van-form validate-first input-align="right" ref="form">
        <van-field :label="'状态'" readonly>
          <template #input>{{auditstatus}}</template>
        </van-field>
        <van-field :label="'结算周期'" readonly style="margin-top:10px;">
          <template #input>T1</template>
        </van-field>
        <div class="attach-item" style="margin-top:0px;">
          <p class="attach-item-title">结算人身份证</p>
        </div>
        
        <div class="imgDiv">
          <van-field name="img" style="width:50%;">
            <template #input>
              <van-image :src="accountIdCardFontImg[0].url"
                     @click="sceneImg(accountIdCardFontImg[0].url)"/>
            </template>
          </van-field>
          <van-field name="img" style="width:50%;">
            <template #input>
              <van-image :src="accountIdCardBackImg[0].url"
                     @click="sceneImg(accountIdCardBackImg[0].url)"/>
            </template>
          </van-field>
        </div>
        <van-field :label="'结算人姓名'" readonly>
          <template #input>{{formData.storeMenAccount.accountUserName}}</template>
        </van-field>
        <van-field :label="'结算人证件号'" readonly>
          <template #input>{{formData.storeMenAccount.accountIdcard}}</template>
        </van-field>
        <van-field :label="'身份证有效期'" readonly>
          <template #input>{{formData.storeMenAccount.accountIdcardExp}}</template>
        </van-field>
        <div class="attach-item" style="margin-top:0px">
          <p class="attach-item-title">银行卡正面</p>
        </div>
        <div class="imgDiv">
          <van-field name="img" style="width:50%;">
            <template #input>
              <van-image :src="accountCardList[0].url"
                     @click="sceneImg(accountCardList[0].url)"/>
            </template>
          </van-field>
        </div>
        <van-field :label="'对私户名'" readonly>
          <template #input>{{formData.storeMenAccount.accountUserName}}</template>
        </van-field>
        <van-field :label="'账户号码'" readonly>
          <template #input>{{formData.storeMenAccount.bankCardNo}}</template>
        </van-field>
        <van-field :label="'开户银行'" readonly>
          <template #input>{{formData.storeMenAccount.bankHoName}}</template>
        </van-field>
        <van-field :label="'开户省市'" readonly>
          <template #input>{{acconutArea3Text}}</template>
        </van-field>
        <van-field :label="'开户支行'" readonly>
          <template #input>{{formData.storeMenAccount.bankName}}</template>
        </van-field>
        <van-field :label="'开户手机'" readonly>
          <template #input>{{formData.storeMenAccount.bankAccountMobile}}</template>
        </van-field>
      </van-form>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { getBankList,getStoremenDetail, getBranchBankList1 } from "@/api/bank";
import { getAreaData } from "@/api/area";

export default {
  name:'employeeSettlementView',
  data(){
    return{
      query:{},
      formData: {},
      accountIdCardFontImg: [],
      accountIdCardBackImg: [],
      accountCardList: [],
      bankList:[],
      acconutArea3Text:'',
      auditstatus:''
    }
  },
  mounted(){
    this.query=this.$route.query
    if (this.query.token) {
      localStorage.setItem("fuhuibatoken", this.query.token);
    }
    if(this.query.clerkId){
      getStoremenDetail(this.query.clerkId).then(res=>{
        this.formData=res.data
        if(this.formData.attachList.length > 0){
          this.formData.attachList.forEach(item=>{
            switch(item.fileType){
              case 1:
                this.accountCardList.push({
                  url:item.filePath
                })
              break;
              case 2:
                this.accountIdCardFontImg.push({
                  url:item.filePath
                })
              break;
              case 3:
                this.accountIdCardBackImg.push({
                  url:item.filePath
                })
              break;
            }
          })
          switch(this.formData.storeMenAccount.auditStatus){
            case 0:
              this.auditstatus='审核中'
            break;
            case 1:
              this.auditstatus='审核通过'
            break;
            case 2:
              this.auditstatus='法人对私'
            break;
            case 3:
              this.auditstatus='未提交'
            break;
          }
        }
        this.getDistric(this.formData.storeMenAccount.accountDistrict)
      })
    }
    window.scrollTo({
      left: 0,
      top: 0,
      behavior: "smooth",
    });
  },
  computed: {
    userInfo () {
      return this.$store.state.user.userInfo;
    },
    merchantForm () {
      return this.$store.state.merchant;
    },
    settlement () {
      return this.$store.state.settlement;
    }
  },
  methods:{
    onclickleft () {
      document.title = '返回APP'
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push({
        path: '/employeeSettlement',
        query:{
          clerkId:this.query.clerkId,
          token:this.query.token
        }
      });
    },
    // 图片预览
    sceneImg (images) {
      ImagePreview({
        images: [images], //需要预览的图片 URL 数组
        showIndex: false, //是否显示页码
        loop: false, //是否开启循环播放 
      })
    },
    getDistric (parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.acconutArea3Text=data[0].provinceName+data[0].cityName+data[0].districtName
        }
      });
    }
  }
}
</script>
<style scoped lang="less">
/deep/.van-picker-column__item--selected {
  color: #ff9600 !important;
}
/deep/.van-picker__confirm {
  color: #ff9600 !important;
}
/deep/.van-field__label {
  color: #323233;
}
/deep/.van-dialog__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 57px 0;
}
/deep/.van-uploader {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__wrapper {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview-image {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview {
  width: 334px;
  height: 224px;
}
img {
  width: 334px;
  height: 224px;
}
.next-step-btn {
  width: 80%;
  margin: 100px auto;
}
.app {
  background: #f9f9f9;
  height: 100%;
}
.content-box {
  background: #f9f9f9;
  padding-bottom: 1px;
  margin-top: 120px;
  box-sizing: border-box;
}

.mt-margin {
  margin-top: 24px;
}
.example-img {
  width: 420px;
  height: 270px;
}
.attach-item {
  margin-top: 24px;
  background: #fff;
  padding: 35px 32px;
  p.attach-item-title {
    font-size: 30px;
    font-weight: 400;
    color: #131313;
  }

  .upload-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .attach-label {
      width: 45%;
      padding-left: 5px;
    }
    .upload-item {
      margin-top: 20px;
      width: 334px;
      height: 224px;
    }
    p {
      font-size: 28px;
      font-weight: 400;
      color: #131313;
      margin: 12px 0;
      text-align: center;
      opacity: 0.8;
    }
    .example {
      display: flex;
      align-items: center;
      color: #ffb72f;
      justify-content: center;
    }
  }
}
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 1px solid #d7d7d7;
  font-size: 36px;
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  .header-item {
    font-weight: 500;
    color: #131313;
    text-align: center;
    margin: 0 auto;
  }
  .header-save {
    color: #ffb72f;
    font-size: 28px;
    border:none;
  }
  .van-button--default{
    border: 0px solid #ebedf0;
  }
}
.notes {
  font-size: 28px;
  font-weight: 400;
  color: #131313;
  opacity: 0.7;
  padding: 24px 35px 0;
  line-height: 35px;
}
.imgDiv{
  display: flex;
  justify-content:flex-start;
  align-items: center;
  background-color: #fff;
  width:100%;
  height: 224px;
}
/deep/ .van-image {
    width: 100%;
    height: 200px;
    background: #191919;
    img {
      width: auto;
      margin: 0 auto;
    }
  }
  /deep/ .van-field__label {
    color: #3d3d3d;
  }
  /deep/ .van-field__control {
    color: #131313;
  }
</style>
